<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>HTML5 Demo</title>
  <style>
    body {
      display: flex;
      width: 100%;
      height: 100vh;
      margin: 0;
      padding: 0
    }

    output {
      width: 100px;
      height:20px
    }

    .left {
      width: 200px;
      background: #f00
    }

    .middle {
      flex: 1;
      background-color: #00f
    }

    .right {
      width: 300px;
      background-color: #ff0
    }

    .triangle {
      width: 0;
      height: 0;
      border-width: 60px;
      border-style: solid;
      border-color: transparent transparent red transparent;
    }
  </style>
</head>

<body>
  <div class="left">
    Flex 多列布局
  </div>
  <div class="middle">
    <form action="/" oninput="result.value=range.value + color.value">
      <input type="range" id="range" value="50">100
      <input type="color" id="color">
      <output name="result"></output>
    </form>
  </div>
  <div class="right">
    border 三角形
    <div class="triangle"></div>
  </div>
</body>

</html>
